<template>
  <div class="class-manage">
    <!-- 顶部操作区 -->
    <div class="operation-bar">
      <el-button type="primary" @click="handleAdd">
        <el-icon><Plus /></el-icon>添加班级
      </el-button>
    </div>

    <!-- 表格区域 -->
    <el-table 
      :data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)" 
      style="width: 100%;"
      :height="530"
      border>
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="className" label="班级名称" />
      <el-table-column prop="teacher" label="班主任" width="120" />
      <el-table-column prop="studentCount" label="人数" width="80" />
      <el-table-column prop="startDate" label="开班时间" width="120" />
      <el-table-column prop="graduateDate" label="预毕业时间" width="120" />
      <el-table-column prop="duration" label="课程时长" width="100" />
      <el-table-column prop="creator" label="创建者" width="120" />
      <el-table-column prop="status" label="班级状态" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.status ? 'success' : 'info'">
            {{ scope.row.status ? '已毕业' : '在读' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="220" align="center">
        <template #default="scope">
          <el-button 
            type="primary" 
            :icon="Edit"
            circle
            @click="handleEdit(scope.row)" />
          <el-button 
            type="danger" 
            :icon="Delete"
            circle
            @click="handleDelete(scope.row)" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>

    <!-- 添加/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '添加班级' : '编辑班级'"
      width="500px"
    >
      <el-form :model="form" label-width="100px">
        <el-form-item label="班级名称">
          <el-input v-model="form.className" />
        </el-form-item>
        <el-form-item label="班主任">
          <el-input v-model="form.teacher" />
        </el-form-item>
        <el-form-item label="开班时间">
          <el-date-picker v-model="form.startDate" type="date" />
        </el-form-item>
       
        <el-form-item label="课程时长">
          <el-input v-model="form.duration" />
        </el-form-item>
        <el-form-item label="班级状态">
          <el-switch v-model="form.status" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Edit, Delete, Plus } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);

// 对话框相关
const dialogVisible = ref(false);
const dialogType = ref('add'); // 'add' 或 'edit'
const form = ref({
  className: '',
  teacher: '',
  studentCount: 0,
  startDate: '',
  graduateDate: '',
  duration: '',
  creator: '',
  status: false
});

// 模拟数据
const tableData = ref([
  {
    id: 1,
    className: '计算机科学1班',
    teacher: '张老师',
    studentCount: 30,
    startDate: '2024-01-01',
    graduateDate: '2024-12-31',
    duration: '12个月',
    creator: '管理员',
    status: false
  },
  {
    id: 1,
    className: '计算机科学1班',
    teacher: '张老师',
    studentCount: 30,
    startDate: '2024-01-01',
    graduateDate: '2024-12-31',
    duration: '12个月',
    creator: '管理员',
    status: false
  },
  {
    id: 1,
    className: '计算机科学1班',
    teacher: '张老师',
    studentCount: 30,
    startDate: '2024-01-01',
    graduateDate: '2024-12-31',
    duration: '12个月',
    creator: '管理员',
    status: false
  },
  {
    id: 1,
    className: '计算机科学1班',
    teacher: '张老师',
    studentCount: 30,
    startDate: '2024-01-01',
    graduateDate: '2024-12-31',
    duration: '12个月',
    creator: '管理员',
    status: false
  },
  {
    id: 1,
    className: '计算机科学1班',
    teacher: '张老师',
    studentCount: 30,
    startDate: '2024-01-01',
    graduateDate: '2024-12-31',
    duration: '12个月',
    creator: '管理员',
    status: false
  },
  {
    id: 1,
    className: '计算机科学1班',
    teacher: '张老师',
    studentCount: 30,
    startDate: '2024-01-01',
    graduateDate: '2024-12-31',
    duration: '12个月',
    creator: '管理员',
    status: false
  },
  {
    id: 1,
    className: '计算机科学1班',
    teacher: '张老师',
    studentCount: 30,
    startDate: '2024-01-01',
    graduateDate: '2024-12-31',
    duration: '12个月',
    creator: '管理员',
    status: false
  },
  {
    id: 1,
    className: '计算机科学1班',
    teacher: '张老师',
    studentCount: 30,
    startDate: '2024-01-01',
    graduateDate: '2024-12-31',
    duration: '12个月',
    creator: '管理员',
    status: false
  },
  {
    id: 1,
    className: '计算机科学1班',
    teacher: '张老师',
    studentCount: 30,
    startDate: '2024-01-01',
    graduateDate: '2024-12-31',
    duration: '12个月',
    creator: '管理员',
    status: false
  },
  {
    id: 1,
    className: '计算机科学1班',
    teacher: '张老师',
    studentCount: 30,
    startDate: '2024-01-01',
    graduateDate: '2024-12-31',
    duration: '12个月',
    creator: '管理员',
    status: false
  },
  {
    id: 1,
    className: '计算机科学1班',
    teacher: '张老师',
    studentCount: 30,
    startDate: '2024-01-01',
    graduateDate: '2024-12-31',
    duration: '12个月',
    creator: '管理员',
    status: false
  },
  {
    id: 1,
    className: '计算机科学1班',
    teacher: '张老师',
    studentCount: 30,
    startDate: '2024-01-01',
    graduateDate: '2024-12-31',
    duration: '12个月',
    creator: '管理员',
    status: false
  },
  {
    id: 1,
    className: '计算机科学1班',
    teacher: '张老师',
    studentCount: 30,
    startDate: '2024-01-01',
    graduateDate: '2024-12-31',
    duration: '12个月',
    creator: '管理员',
    status: false
  },
  {
    id: 1,
    className: '计算机科学1班',
    teacher: '张老师',
    studentCount: 30,
    startDate: '2024-01-01',
    graduateDate: '2024-12-31',
    duration: '12个月',
    creator: '管理员',
    status: false
  },
  {
    id: 1,
    className: '计算机科学1班',
    teacher: '张老师',
    studentCount: 30,
    startDate: '2024-01-01',
    graduateDate: '2024-12-31',
    duration: '12个月',
    creator: '管理员',
    status: false
  },
  // ... 更多数据
]);


// 添加班级
const handleAdd = () => {
  dialogType.value = 'add';
  form.value = {
    className: '',
    teacher: '',
    studentCount: 0,
    startDate: '',
    graduateDate: '',
    duration: '',
    creator: '当前用户',
    status: false
  };
  dialogVisible.value = true;
};

// 编辑班级
const handleEdit = (row) => {
  dialogType.value = 'edit';
  form.value = { ...row };
  dialogVisible.value = true;
};

// 删除班级
const handleDelete = (row) => {
  ElMessageBox.confirm(
    '确定要删除该班级吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // 这里添加删除逻辑
      ElMessage({
        type: 'success',
        message: '删除成功',
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      });
    });
};

// 提交表单
const handleSubmit = () => {
  if (dialogType.value === 'add') {
    // 添加逻辑
    tableData.value.push({
      id: tableData.value.length + 1,
      ...form.value
    });
    ElMessage.success('添加成功');
  } else {
    // 编辑逻辑
    const index = tableData.value.findIndex(item => item.id === form.value.id);
    if (index !== -1) {
      tableData.value[index] = { ...form.value };
    }
    ElMessage.success('修改成功');
  }
  dialogVisible.value = false;
};


</script>

<style scoped>
.class-manage {
  padding: 20px;
}

.operation-bar {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.el-button {
  margin-right: 10px;
}

:deep(.el-table) {
  margin-top: 20px;
}

:deep(.el-dialog__body) {
  padding: 20px;
}
</style>

